<template>
  <view class="container">
    <!-- 返回导航栏 -->
    <view class="nav-bar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="title">用药提醒列表</text>
    </view>

    <!-- 提醒列表 -->
    <scroll-view scroll-y class="reminder-list">
      <view v-if="reminderList.length === 0" class="empty-state">
        <text class="empty-text">暂无用药提醒</text>
      </view>
      <view v-else class="list-content">
        <view
          v-for="reminder in reminderList"
          :key="reminder.id"
          class="reminder-card"
        >
          <view class="reminder-header">
            <text class="medicine-name">{{ reminder.medicineName }}</text>
            <switch
              :checked="reminder.isActive"
              @change="toggleReminder(reminder.id)"
              color="#018d71"
            />
          </view>
          <view class="reminder-info">
            <view class="info-row">
              <text class="label">提醒时间：</text>
              <text class="value">{{ reminder.time }}</text>
            </view>
            <view class="info-row">
              <text class="label">重复：</text>
              <text class="value">{{ reminder.repeat }}</text>
            </view>
            <view class="info-row">
              <text class="label">服用剂量：</text>
              <text class="value">{{ reminder.dosage }}</text>
            </view>
          </view>
          <view class="reminder-actions">
            <view class="action-btn edit" @click="editReminder(reminder.id)">
              <text class="btn-text">编辑</text>
            </view>
            <view class="action-btn delete" @click="deleteReminder(reminder.id)">
              <text class="btn-text">删除</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加提醒按钮 -->
    <view class="add-btn" @click="addReminder">
      <text class="btn-text">添加提醒</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 提醒列表数据
const reminderList = ref([
  {
    id: 1,
    medicineName: '阿莫西林胶囊',
    isActive: true,
    time: '08:00',
    repeat: '每天',
    dosage: '2粒'
  },
  {
    id: 2,
    medicineName: '布洛芬缓释胶囊',
    isActive: false,
    time: '12:00',
    repeat: '每天',
    dosage: '1粒'
  }
])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 切换提醒状态
const toggleReminder = (id: number) => {
  const reminder = reminderList.value.find(item => item.id === id)
  if (reminder) {
    reminder.isActive = !reminder.isActive
  }
}

// 编辑提醒
const editReminder = (id: number) => {
  // TODO: 跳转到编辑页面
  console.log('编辑提醒:', id)
}

// 删除提醒
const deleteReminder = (id: number) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条用药提醒吗？',
    success: (res) => {
      if (res.confirm) {
        reminderList.value = reminderList.value.filter(item => item.id !== id)
      }
    }
  })
}

// 添加提醒
const addReminder = () => {
  // TODO: 跳转到添加页面
  console.log('添加提醒')
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-top: 88rpx;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
  border-bottom: 1rpx solid #f0f0f0;

  .back-icon {
    font-size: 28rpx;
    color: #333333;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 44rpx;
  }
}

.reminder-list {
  height: calc(100vh - 88rpx - 120rpx);
  padding: 30rpx;

  .empty-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .empty-text {
      font-size: 28rpx;
      color: #999999;
    }
  }
}

.reminder-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .reminder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .medicine-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .reminder-info {
    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 28rpx;
        color: #999999;
        width: 140rpx;
      }

      .value {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }

  .reminder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20rpx;
    gap: 20rpx;

    .action-btn {
      padding: 12rpx 24rpx;
      border-radius: 32rpx;

      &.edit {
        background: #e6f7f4;

        .btn-text {
          color: #018d71;
        }
      }

      &.delete {
        background: #fff1f0;

        .btn-text {
          color: #f5222d;
        }
      }

      .btn-text {
        font-size: 24rpx;
      }
    }
  }
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;
  height: 88rpx;
  background: #018d71;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn-text {
    font-size: 32rpx;
    color: #ffffff;
  }
}
</style>